<script lang="ts" setup>
import { getImage, getRarityClass } from "@/utils";
import type { IEquipmentInfo } from "@/api/info/type";

const props = defineProps({
  eq: {
    type: Object as PropType<IEquipmentInfo>,
    default: () => {}
  },
  notUseIsland: {
    type: Boolean,
    default: false
  },
  smallIcon: {
    type: Boolean,
    default: false
  },
  canClick: {
    type: Boolean,
    default: false
  },
  gray: {
    type: Boolean,
    default: false
  },
  active: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(["clickeq"])

const onclick = (e: any) => {
  emit("clickeq", props.eq, e);
}
    
const resolve = (icon: string) => {
  return getImage(`equipment/${icon}`);
}
</script>

<template>
  <view class="eq-item-box" :class="{ 'small-icon': smallIcon }" @tap="onclick">
    <view v-if="!props.active" class="floatLayer" />
    <view v-if="eq && eq.icon" class="eq-icon " :class="{ 'epic': getRarityClass(eq.rarity ?? ''), 'can-click': canClick, 'gray': gray }">
      <image class="img" :src="resolve(eq.icon)" />
    </view>
    <span v-else class="icon" />
  </view>
</template>

<style scoped lang="scss" src="./css/eq-color.scss"></style>

<style scoped lang="scss">
.eq-item-box {
  display: inline-block;
}

.icon {
  position: relative;
  display: inline-block;
  height: 34px;
  width: 34px;
  border: 1px solid #4A4A4A;
  background-color: rgba(0,0,0,.5);
}

.floatLayer {
    position: absolute;
    width: 36px;
    height: 36px;
    z-index: 2;
    background-color: #00000080;
  }

.eq-icon-box-inner {
  zoom: 1.2857
}
.small-icon {
  width: 24px !important;
  height: 24px !important;
  z-index: 3;
}
</style>
